<template>

    <div>
      <Carousel   loop  radius-dot="true" autoplay >
        <CarouselItem v-for="item in banner" :key="item.id">
            <img :src="item.image"></img>
        </CarouselItem>
    </Carousel>
    <FilterMenu @on-filter="filter"></FilterMenu>
    <div style="display:flex;padding:0 0;margin-top:40px;flex-wrap:wrap">
        <Product v-for="(item,index) in list " :key="index" :item="item"/>
    </div>
        <div v-show='list.length==0'>
            <h1>暂无数据</h1>
        </div>
    <div>
    <Page :total="30" @on-change="cpage"/>
    </div>
    <div style="font-size:60px">{{count}}</div>
</div>
</template>

<script>
import FilterMenu from '@/components/FilterMenu'
import Product from '@/components/Product'
import service from '@/service'
import { mapState ,mapActions} from 'vuex'
    export default{
        name:'phone',
        components:{
            Product,
            FilterMenu
        },
        data () {
            return {
                banner:[],
                img:'',
                list:[],
                
            }},
            
            methods:{
                ...mapActions(['getBanner']),
                cpage(page){
                    // console.log(page)
                    service.get('/v1/home/phoneList?page='+page)
                    .then((res)=>{
                        this.list=res
                        })
                },
                filter(brand,rom,os){
                    // console.log(brand,rom,os)
                    service.get('/v1/home/phoneList?brand='+brand+'&rom='+rom+'&os='+os)
                    .then((res)=>{
                        this.list=res
                        })
                    },

            },
            computed:{
                ...mapState({
                    banner1:(state)=>{
                        return state.home.banner
                    },
                    count:(state)=>{
                        return state.home.count
                    }
                })
            },
        created(){
            this.getBanner()
          service.get('/v1/home/banner')
            .then((res)=>{
                console.log(res)
                this.banner = res
            })
            service.get('/v1/home/phoneList')
            .then((res)=>{
                // console.log(res)
                this.list=res;
            })         
        }
    }
</script>

<style lang="scss" scoped>

</style>

